.login {
  position: relative;
  padding: 0.5rem;

  .inp1 {
    /deep/ .van-cell {
      padding: 0.26rem 0;
      margin-top: 0.4rem;
      font-size: 0.32rem;

      &:nth-child(2) {
        padding-left: 1.3rem;
        margin-top: -1rem;
      }

      &:nth-child(3) {
        padding-right: 2rem;
      }

      &:not(:last-child)::after {
        border-bottom: 1px solid #d0d0d0;
        left: 0;
      }
    }

    .area {
      display: inline-block;
      position: relative;
      width: 1.2rem;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.32rem;
      color: #333;
      z-index: 99;
      padding-left: 0.15rem;

      .area-icon {
        margin-left: 0.1rem;
        position: absolute;
        top: 32%;
        z-index: 991;
      }
    }

    .code {
      position: absolute;
      text-align: center;
      width: 1.5rem;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.28rem;
      color: #848689;
      right: 10%;
      top: 16.5%;
      z-index: 999;

      &::before {
        content: '';
        position: absolute;
        left: -25%;
        top: 24%;
        border: 0.01rem solid #ccc;
        height: 0.5rem;
      }
    }
  }

  .inp2 {
    margin-top: -0.4rem;

    /deep/ .van-cell {
      padding: 0.26rem 0;
      margin-top: 0.4rem;
      font-size: 0.32rem;

      &:nth-child(2) {
        padding-right: 2.2rem;
      }


      &:not(:last-child)::after {
        border-bottom: 1px solid #d0d0d0;
        left: 0;
      }
    }

    .forgetpass {
      position: absolute;
      text-align: center;
      width: 1.5rem;
      height: 1rem;
      line-height: 1rem;
      font-size: 0.28rem;
      color: #333;
      right: 10%;
      top: 16.5%;
      z-index: 999;

      &::before {
        content: '';
        position: absolute;
        left: -25%;
        top: 24%;
        border: 0.01rem solid #ccc;
        height: 0.5rem;
      }
    }
  }




  .btn {
    margin: 0.4rem 0 0.2rem;

    .btn_sub {
      height: 1rem;
      line-height: 1rem;
      margin-bottom: 0.2rem;
      background: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
      -webkit-background: linear-gradient(90deg, #fab3b3, #ffbcb3 73%, #ffcaba);
      -webkit-box-shadow: 0 0.1rem 0.2rem 0 rgba(255, 62, 62, 0.2);
      box-shadow: 0 0.1rem 0.2rem 0 rgba(255, 62, 62, 0.2);

      .van-button__text {
        font-size: 0.32rem;
      }
    }

    .btn_log {
      height: 1rem;
      line-height: 1rem;

      .van-button__text {
        font-size: 0.32rem;
      }
    }
  }

  .swich-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 0.4rem;

    div {
      color: rgba(0, 0, 0, 0.4);
      font-size: 0.28rem;
    }
  }

  .otherLogin {
    margin-top: 1.8rem;
    border-top: 0.02rem solid rgba(0, 0, 0, 0.1);

    .txt-otherLogin {
      font-size: 0.28rem;
      color: rgba(0, 0, 0, 0.2);
      width: 2.8rem;
      margin: -0.16rem auto 0;
      background: #fff;
      text-align: center;
    }

    .quick-type {
      margin: 1.4rem 0 0.2rem;
      text-align: center;
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 0.4);

      span {
        display: inline-block;
        width: 0.65rem;
        margin: 0 0.45rem;
        padding-top: 0.9rem;
      }

      span:nth-child(1) {
        background: url('~@/assets/images/qq.jpg') no-repeat;
        background-size: 100% auto;
      }

      span:nth-child(2) {
        background: url('~@/assets/images/wx.jpg') no-repeat;
        background-size: 100% auto;
        padding-top: 0.85rem;
      }

      span:nth-child(3) {
        background: url('~@/assets/images/ap.jpg') no-repeat;
        background-size: 100% auto;
      }
    }
  }

  .verify {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999;

    /deep/ #slideVerify {
      margin: 30% auto 0;
      width: 315px;
      // height: 4rem;
      background: #fff;


      canvas:nth-child(1) {
        // width: 100%;
        // height: 100%;
      }

      canvas:nth-child(3) {
        //width: 1.32rem;
        //height: 100%;
      }

      .slide-verify-slider {
        width: 100%;
        font-size: .3rem;
        border: 0;
        margin-top: 0;
      }
    }

  }
}

@media screen and (min-width: 414px) {
  .login {
    .verify {
      /deep/ #slideVerify {
        canvas:nth-child(1) {}

        canvas:nth-child(3) {}
      }
    }
  }

}